<template>
    <div class="app">
        <myNavbar title="物流填写"></myNavbar>
        <list>
            <cell>
                <div class="logistics_product_box" v-for="(item,index) in detailsForm.itemList">
                    <div class="logistics_product">
                        <div class="logistics_product_img">
                            <image :src="item.thumbnail" style="width:120px;height:120px"></image>
                        </div>
                        <div class="logistics_product_column">
                            <text class="logistics_product_column_title">{{item.name}}</text>
                            <text class="logistics_product_column_subtitle">{{item.spec}}</text>
                        </div>
                    </div>
                    <div class="logistics_information" v-if="item.areaName!=underfind && item.address != underfind">
                        <div style="margin-bottom:10px">
                            <text style="font-size:30px;letter-spacing:1px">{{item.consignee}}</text>
                            <text style="font-size:30px;letter-spacing:1px">{{item.phone}}</text>
                        </div>
                        <text style="font-size:30px;letter-spacing:1px">{{item.address}}</text>
                        <div class="address_botton"
                             @click="addressClick(item.consignee,item.phone,item.areaName,item.address)">
                            <text style="font-size:24px;color:white">快速复制</text>
                        </div>
                    </div>
                    <div class="logistics_information">
                        <div class="logistics_information_box">
                            <text class="logistics_information_box_title">物流单号</text>
                            <input class="logistics_information_box_input" v-model="item.trackingNo"
                                   placeholder="请填写物流单号"/>
                        </div>
                    </div>
                </div>
                <div style="width:750px;height:200px"></div>
                <div class="logistics_botton" @click="submitClick">
                    <text class="logistics_botton_title">提交</text>
                </div>
            </cell>
        </list>
    </div>

</template>

<script>
    import {
        shipping,
        find
    } from '../../../api/askfor';
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    export default {
        data() {
            return {
                detailsForm: {},
                id: ''
            }
        },
        created() {
            this.id = eeui.getPageInfo('orderRefund').params
            this.findClick()
        },
        components:{
            myNavbar
        },
        methods: {
            submitClick() {
                var _this = this
                var trackingNo = []
                _this.detailsForm.itemList.forEach(function (item) {
                    if (item.trackingNo != '' && !_this.isEmptyString(item.trackingNo)) {
                        trackingNo.push(item)
                    }
                })
                if (trackingNo.length != _this.detailsForm.itemList.length) {
                    eeui.toast('请填写物流')
                    return
                }
                shipping(JSON.stringify(this.detailsForm.itemList), _this.id).then(res => {
                    if (res.type == 'success') {
                        eeui.toast(res.content)
                        eeui.closePage();
                    }
                }).catch(error => {
                    eeui.toast(error.content)
                })
            },
            findClick() {
                var _this = this
                find(this.id).then(
                    res => {
                        if (res.type == 'success') {
                            _this.detailsForm = res.data.askfor
                            _this.detailsForm.createDate = this.formatTime(_this.detailsForm.createDate)
                            _this.detailsForm.itemList.forEach(function(item) {
                                item.thumbnail = _this.thumbnail(item.thumbnail, 120, 120)
                            })
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            addressClick(consignee, phone, areaName, address) {
                eeui.copyText(consignee + phone + areaName + address)
                eeui.toast('复制成功')
            }
        }
    }
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .logistics_product {
        width: 700px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        /* margin-left: 25px; */
        padding: 25px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
    }

    .logistics_product_img {
        width: 120px;
        height: 120px;
        background: rgba(249, 249, 249, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .logistics_product_column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 520px;
        margin-left: 20px;
    }

    .logistics_product_column_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .logistics_product_column_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .logistics_information {
        width: 700px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        box-sizing: border-box;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 20px;
    }

    .logistics_information_box {
        display: flex;
        flex-direction: row;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .logistics_information_box_input {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        opacity: 0.3;
        margin-left: 20px;
        width: 520px;
    }

    .logistics_information_box_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .logistics_botton {
        width: 700px;
        height: 74px;
        background-image: linear-gradient(129deg, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 25px;
        position: fixed;
        bottom: 40px;
    }

    .logistics_botton_title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .logistics_information_address {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .address_botton {
        width: 200px;
        height: 60px;
        background-image: linear-gradient(to bottom, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .logistics_product_box {
        width: 700px;
        background-color: white;
        margin-left: 25px;
        border-radius: 16px;
        margin-top: 25px;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
</style>
